<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="../../static/css/conson.css" th:href="@{/css/conson.css}">
</head>

<body class="body animated pulse">

<!--导航-->
<nav th:replace="admin/_PublicTemplate :: nav"></nav>
<br><br>

<!-- 详情内容 -->
<div class=" m-container m-padded-tb-big ">
    <div class="ui container ">
        <div class="ui buttons">
            <button class="ui button"><a th:href="@{/kings/kings}" href="#" style="color: cadetblue">返回后台</a></button>
            <button class="ui button"><a href="#" th:href="@{/kings/WriteKings/input}" style="color: cadetblue">新增资讯</a>
            </button>
        </div>
        <!-- 二级菜单 -->
        <div class="ui segment ">
            <div id="context2">
                <div class="ui secondary pointing menu">
                    <a class="item" data-tab="fifth">列表</a>
                </div>

                <div class="ui active tab segment" data-tab="fifth">

                    <!-- 查询列表信息-->
                    <div class="ui  form"><br>
                        <!--							<form action="#" method="post" class="ui segment form">-->
                        <div class="fields">
                            <div class="field">
                                <input type="text" name="title" placeholder="标题"/>&emsp;
                            </div>

                            <div class="field">
                                <div class="ui  type selection dropdown">
                                    <input type="hidden" name="typeId">
                                    <i class="dropdown icon"></i>
                                    <div class="default text">分类</div>
                                    <div class="menu">
                                        <div class="item" th:each="type : ${types}" th:data-value="${type.id}"
                                             th:text="${type.name}" data-value="1">前端学习
                                        </div>
                                        <!--/*-->
                                        <div class="item" data-value="2">后端学习</div>
                                        <!--*/-->
                                    </div>
                                </div>
                            </div>

                            <div class="field">
                                <div class="ui checkbox"><br>
                                    <input type="checkbox" id="recommend" name="recommend">
                                    <label for="recommend">推荐</label>&emsp;
                                </div>
                            </div>
                            <div class="field">
                                <button type="button" id="search-btn" class="ui button"><i class="search icon"></i>搜索
                                </button>
                            </div>
                            <div class="field">
                                <button type="button" id="clear-btn" class="ui button"><i class="eraser icon"></i>清除
                                </button>
                            </div>
                        </div>

                        <!--							</form>-->
                    </div>

                    <input type="hidden" name="page">
                    <!--							<div class="">-->
                    <!--								<div class="ui mini pagination menu" th:if="${page.totalPages}>1">-->
                    <!--									<a class="item" onclick="page(this)" th:attr="data-page=${page.number}-1"-->
                    <!--									   th:unless="${page.first}">上一页</a>-->
                    <!--									<a class="item" onclick="page(this)" th:attr="data-page=${page.number}+1"-->
                    <!--									   th:unless="${page.last}">下一页</a>-->
                    <!--								</div>-->
                    <!--							</div>-->
                    <br>
                    <div class="" th:if="${page.totalPages}>1">
                        <div class="ui mini pagination menu">
                            <a class="item" th:href="@{/kings/WriteKings(page=${page.number}-1)}"
                               th:unless="${page.first}" href="#">上一页</a>
                            <a class="item" th:href="@{/kings/WriteKings(page=${page.number}+1)}"
                               th:unless="${page.last}" href="#">下一页</a>
                        </div>
                    </div>

                    <div style="text-align: center;color: dodgerblue" class="animated bounceInDown"
                         th:unless="${#strings.isEmpty(message)}" th:text="${message}">
                        新增成功
                    </div>
                    <br>

                    <!-- 列表信息-->
                    <div id="table-container">
                        <table th:fragment="kingsList" class="ui compact celled definition table">
                            <thead>
                            <tr>
                                <th></th>
                                <th>编号</th>
                                <th>标题</th>
                                <th>分类</th>
                                <th>推荐</th>
                                <th>状态</th>
                                <th>时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="kings,iterStat : ${page.content}">
                                <td class="collapsing">
                                    <div class="ui fitted slider checkbox">
                                        <input type="checkbox"> <label></label>
                                    </div>
                                </td>
                                <td th:text="${iterStat.count}">1</td>
                                <td th:text="${kings.title}">露娜的故事</td>
                                <td th:text="${kings.type.name}">战士</td>
                                <td th:text="${kings.recommend}">Yes</td>
                                <td th:text="${kings.published} ? '已发布':'草稿' ">发布</td>
                                <td th:text="${kings.updateTime}">5201314</td>
                                <td>
                                    <a th:href="@{/kings/WriteKings/{id}/delete(id=${kings.id})}" href="#"
                                       class="ui mini orange button">删除</a>
                                    <a th:href="@{/kings/WriteKings/{id}/input(id=${kings.id})}" href="#"
                                       class="ui mini green button">修改</a>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                        <br><br>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer th:replace="admin/_PublicTemplate :: footer"></footer>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>

    $('#clear-btn')
        .on('click', function () {
            $('.ui.type.dropdown')
                .dropdown('clear')
            ;
        })
    ;

    function page(obj) {
        $("[name='page']").val($(obj).data("page"));
        loadData();
    }

    $("#search-btn").click(function () {
        $("[name='page']").val(0);
        loadData();
    });

    function loadData() {
        $("#table-container").load(/*[[@{/kings/WriteKings/Search}]]*/"/kings/WriteKings/Search", {
            title: $("[name='title']").val(),
            typeId: $("[name='typeId']").val(),
            recommend: $("[name='recommend']").prop('checked'),
            page: $("[name='page']").val()
        });
    }

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown')
        .dropdown();

    $('#context2 .menu .item')
        .tab({
            // special keyword works same as above
            context: 'parent'
        });

    $('.ui.checkbox')
        .checkbox()
    ;

    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'title',
                rules: [{
                    type: 'empty',
                    prompt: '标题 : 请输入资讯标题'
                }]
            }
        }
    });
</script>

</body>
</html>
